<template>
  <div class="mod-config">
    <basic-container>
      <navigationZXGZ :sign="{ a: true, b: false, c: false,d: false,e: false }"></navigationZXGZ>
      <div class="boxsty zhiBiao">
        <div  :height="searchheight" >
                <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
                <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="dataForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >

              <el-form-item label="姓名">
                <el-input
                  v-model="dataForm.cyrRealName"
                  placeholder="请输入姓名"
                  :clearable="true"
                ></el-input>
              </el-form-item>

              <el-form-item label="工作名称">
                <el-input
                  v-model="dataForm.gzmc"
                  placeholder="请输入工作名称"
                  :clearable="true"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList(1)"
                >检索
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

<!--        <div>-->
<!--          专项工作-->
<!--          <div style="float:right">-->
<!--            <el-button type="primary">导出</el-button>-->
<!--          </div>-->
<!--        </div>-->
        <el-table
          style="width: 100%;margin-top:20px"
          :data="dataList"
          border
          :default-sort = "{prop: 'createTime', order: 'descending'}"
          v-loading="dataListLoading">
          <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
          <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
          <el-table-column
            prop="cyrUserId"
            header-align="center"
            align="center"
            min-width="100"
            label="员工编号">
          </el-table-column>
          <el-table-column
            prop="cyrRealName"
            header-align="center"
            align="center"
            min-width="100"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="gzmc"
            header-align="center"
            align="center"
            min-width="100"
            label="工作名称">
          </el-table-column>
          <el-table-column
            prop="realSum"
            header-align="center"
            align="center"
            min-width="100"
            sortable
            label="得分">
          </el-table-column>
          <el-table-column
            prop="createTime"
            header-align="center"
            align="center"
            min-width="100"
            label="创建时间">
          </el-table-column>


        </el-table>
      </div>
      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </basic-container>
  </div>
</template>

<script>

    import {resultList} from "@/api/hetongrenwu/zhuanxianggongzuo/zxgzpfjg";

    export default {
        components:{

        },
        data(){
            return{
                form:{},
                searchadvanced: true,
                searchheight: '0',
                dataForm:{},
                //showZhong:1,
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataList:[],
                dataListLoading:false,
            }
        },
        created() {
            this.getDataList()
        },
        methods:{
            searchchangeadvanced() {
                this.searchadvanced = !this.searchadvanced;
                if(this.searchadvanced){
                    this.searchheight= 'auto'
                }
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true;
           /*     this.dataList=[{
                    cyrUserId:'2204221987',//员工编号
                    cyrRealName:'张三',//姓名
                    gzcjId:'工作1',//工作名称
                    realSum:'20',//得分
                    createTime:'2022-03-04',//创建时间
                },{
                    cyrUserId:'2204221987',//员工编号
                    cyrRealName:'李四',//姓名
                    gzcjId:'工作2',//工作名称
                    realSum:'30',//得分
                    createTime:'2022-03-05',//创建时间
                }];
                this.totalPage = 10;*/
                resultList(Object.assign({
                    cyrRealName:this.dataForm.cyrRealName, //姓名
                     gzmc:this.dataForm.gzmc,//工作名称
                    current: this.pageIndex, //当前页
                    size: this.pageSize // 每页条数
                })).then(response => {
                    this.dataList = response.data.data.records
                    this.totalPage = response.data.data.total;
                    console.log(response) ;
                })
                this.dataListLoading = false
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            cutout(cellValue) {
                if (cellValue) {
                    var c = cellValue.split(",");
                    if(c.size<1){
                        c.push('-');
                        c.push('-');
                    } else if(c.size<2){
                        c.push('-');
                    }
                    return c;
                }
            }

        }
    }
</script>

<style>

</style>
